<script setup lang="ts">

import Card from "@/components/Card.vue";
import {NButton, NInput, useMessage} from 'naive-ui';
import {type Ref, ref, useTemplateRef} from "vue";
import Hello from "@/components/Hello.vue";

const input = useTemplateRef('input-box');
const value: Ref<String> = ref('');
const list: Ref<Array<String>> = ref([]);
const message = useMessage();

function add() {
  console.log(value.value)
  if (value.value === "") {
    message.warning("请输入信息");
    input.value?.focus();
    return false;
  }
  list.value.push(value.value);
  value.value = "";
}
</script>

<template>
  <card title="全局组件">
    <Hello/>

    <p>6666666666</p>
    <input v-model="value" ref="input-box" @keydown.enter="add"/>
    <button @click="add">添加</button>
    <ul>
      <li v-for="(item,index) of list">{{ item }}</li>
    </ul>
  </card>
</template>

<style scoped>
select, textarea, input[type=text] {
  border: 1px solid rgba(60, 60, 60, .29);
  border-radius: 4px;
  padding: .2em .6em;
  margin-top: 10px;
  background: transparent;
  transition: background-color .5s;
}

select:focus, input[type=text]:focus, textarea:focus {
  outline: 1px solid rgb(40, 35, 186);
}
</style>